<script setup>
import  { tool }  from "../../tool/index"

import { Search, List } from '@element-plus/icons-vue'
import axios from "axios"
import { ref, reactive, onMounted, computed, watch } from "vue"
// Axios 请求地址
const path = tool.serverPath + "api/app_api/comment/"
// 初始化数据
var data = reactive({})
// 搜索范围选择器
var SelectValue = ref("blog_id")

// 搜索框
var input_txt = ref("")
// 判断 搜索框 是否进行隐藏
var disabledSearch = computed(() => {
    if (SelectValue.value == "comment_time") {
        input_txt = ref(new Date())
        return true
    }
    else {
        return false
    }
})

setInterval(() => {console.log(formattedDate.value)}, 1000)

const formattedDate = computed({
    get: () => {
        return SelectValue.value === "comment_time" ? formatDate(input_txt.value) : input_txt.value;
    },
    set: (value) => {
        SelectValue.value = parseDate(value);
    },
});

// 辅助函数：将日期格式化为 'yyyy-mm-dd'
function formatDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

// 辅助函数：解析 'yyyy-mm-dd' 格式的日期
function parseDate(value) {
    const parts = value.split('-');
    if (parts.length === 3) {
        const year = parseInt(parts[0], 10);
        const month = parseInt(parts[1], 10) - 1; // Months are 0-based
        const day = parseInt(parts[2], 10);
        return new Date(year, month, day);
    }
    return null;
}


// 监听 查询选择器是否选择了 comment_time
watch(SelectValue, (newValue, oldValue) => {
    if (oldValue == "comment_time") {
        input_txt = ref("")
    }
})
// 选择器 的 option 选项
var userSelect = {
    user: ["blog_id", "comment_id", "comment_content", "user_id", "comment_time"],
    tips: ["博客ID", "评论ID", "评论内容", "用户ID", "评论时间"]
}
// 需要展示的数列
var prop = {
    fields: ["blog_id", "comment_id", "comment_content", "user_id", "comment_time"],
    tips: ["博客ID", "评论ID", "评论内容", "用户ID", "评论时间"]
}
// 是否进行模糊查询
var bool = ref(false)
// 分页数据
let limit = ref(5)
let offset = ref(1)
let pageCount = ref(0)
// Axios 查询函数 
async function SearchUser() {
    try {
        var value = input_txt.value
        if (input_txt.value instanceof Date) {
            value = ["time", `${formatDate(input_txt.value)}`, `${formatDate(input_txt.value)}`]
        }
        var response = await axios.get(path + "get", {
            params: {
                key: "Search",
                columns: [],
                limit: limit.value,
                offset: offset.value,
                data: {
                    OpLike: bool.value,
                    key: [SelectValue.value],
                    value: [value]
                }
            }
        })
        data.data = response.data.data
        pageCount.value = response.data.count
    } catch (error) {
        alert(err)
    }
}
// 分页回调函数
function handlePageChange(value) {
    offset.value = value
    SearchUser()
}

let showDialog = ref(false)
let deleIndex = reactive({
    id: undefined,
    index: undefined
})
//  数据删除
function deleteData() {
    axios.post(path + "post", {
        key: "destroy",
        data: {
            key: ["comment_id"],
            value: [deleIndex.id],
        }
    }).then(date => {
        data.data.splice(deleIndex.index, 1)
        alert("删除成功")
        console.log(date.data.message)
        showDialog.value = false
    })
}
// 列 删除
function handleDelete(index, row) {
    showDialog.value = true
    deleIndex.id = JSON.stringify(row.comment_id)
    deleIndex.index = index
}

let showDialogConetent = ref(false)
let changeIndex = reactive({
    id: undefined,
    index: undefined,
    content: undefined
})
//列 修改内容
function handleChangeConetent(index, row) {
    showDialogConetent.value = true
    changeIndex.id = JSON.stringify(row.comment_id)
    changeIndex.index = index
    changeIndex.content = row.comment_content
}
//修改内容
function changeData() {
    axios.post(path + "post", {
        key: "update",
        data: {
            key: ["comment_content"],
            value: [changeIndex.content],
        },
        where: {
            key: ["comment_id"],
            value: [changeIndex.id]
        }
    }).then(date => {
        alert("修改成功")
        location.reload()
        showDialog.value = false
    })
}
// 初始化列表
onMounted(() => {
    SearchUser()
    formattedDate.value = formattedDate.value;
})
</script>
<template>
    <el-row :gutter="40">
        <!-- 搜索功能标题 -->
        <el-divider content-position="left">
            <el-text size="large">
                <el-icon>
                    <Search />
                </el-icon> 综合搜索
            </el-text>
        </el-divider>
        <!-- 搜索框 -->
        <el-col v-show="!disabledSearch" :span="10">
            <el-input v-model="input_txt" placeholder="请输入搜索内容" clearable :disabled="disabledSearch" />
        </el-col>
        <!-- 评论时间选择框 -->
        <el-col v-show="disabledSearch" :span="10">
            <el-date-picker
    v-model="input_txt"
    type="date"
    placeholder="选择日期和时间"
    format="YYYY-MM-DD"
  >
</el-date-picker>
            <el-calendar v-model="input_txt" />
        </el-col>
        <!-- 搜索范围选择框 -->
        <el-col :span="4">
            <el-select v-model="SelectValue" placeholder="Select">
                <el-option v-for="(item, index) in userSelect.user" :key="index" :label="userSelect.tips[index]"
                    :value="item" />
            </el-select>
        </el-col>
        <!-- 搜索按钮 -->
        <el-col :span="2">
            <el-button @click="SearchUser()">确认搜索
            </el-button>
        </el-col>
        <!-- 模糊搜索按钮 -->
        <el-col :span="4">
            <el-text> 模糊搜索：<el-switch v-model="bool" /> </el-text>
        </el-col>
        <!-- 数据列表标题 -->
        <el-divider content-position="left">
            <el-text size="large">
                <el-icon>
                    <List />
                </el-icon>
                数据列表
            </el-text>
        </el-divider>
        <!-- 数据展示列表 -->
        <el-col :span="24">
            <el-table table-layout="auto" border :data="data.data">
                <el-table-column v-for="(item, index) in prop.fields" :prop="item" :label="prop.tips[index]"
                    header-align="center">
                </el-table-column>
                <el-table-column width="200" header-align="center" label="操作">
                    <template #default="scope">
                        <div class="center">
                            <el-button  type="primary" @click="handleChangeConetent(scope.$index, scope.row)"> 修改
                            </el-button>
                            <el-button  type="danger" @click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <!-- 确认删除 -->
        <el-dialog v-model="showDialog" title="确认删除" width="30%">
            <div slot="footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" @click="deleteData()">确定</el-button>
            </div>
        </el-dialog>
        <!-- 修改内容 -->
        <el-dialog v-model="showDialogConetent" title="修改内容" width="30%">
            <div slot="footer">
                <el-input type="textarea" v-model=changeIndex.content></el-input>
                <el-button @click="showDialogConetent = false">取消</el-button>
                <el-button type="primary" @click="changeData()">确定</el-button>
            </div>
        </el-dialog>
        <!-- 分页按钮 -->
        <el-col :span="24">
            <el-pagination background layout="prev, pager, next" :page-size="limit" :total="pageCount"
                @current-change="handlePageChange" />
        </el-col>
    </el-row>
</template>
<style scoped>
.right {
    text-align: right;
}

.el-col {
    margin: 15px 0px 15px 0px;
}

.el-col .el-link {
    margin-left: 5px;
}

.el-row {
    padding: 15px;
    border-radius: 0px 0px 5px 5px;
}

.el-table {
    border-radius: 5px;
    border: 1px solid #dedfe0;
}

.center {
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}


.el-form-item .el-image {
    border-radius: 100%;
    background-color: rgb(233, 233, 233);
    width: 100px;
    height: 100px;
}

.el-form-item input[type="file"] {
    display: none;
}
</style>